<template>
  <div class="take-address">
    <div class="address-wrapper-bg">
      <img src="http://qiniu.whxgjt.com/dfh2/img_shxx.png" alt="" class="address-bg" />
      <img
        src="~@/assets/img/address/btn_bcxx.png"
        alt=""
        class="save-info"
        @click="saveAddress"
      />
    </div>

    <div class="form">
      <!-- 用户名 -->
      <div class="form-item">
        <img src="~@/assets/img/address/img_yhm.png" alt="" class="img-label" />
        <div class="input-wrapper">
          <input
            type="text"
            placeholder="请输入用户名"
            v-model.trim="userInfo.userName"
            @focus="inputFocus"
            @blur="inputBlur"
          />
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="form-item">
        <img
          src="~@/assets/img/address/img_lxfs.png"
          alt=""
          class="img-label"
        />
        <div class="input-wrapper">
          <input
            type="number"
            placeholder="请输入联系方式"
            v-model.trim="userInfo.phoneNum"
            oninput="if(value.length>11)value=value.slice(0,11)"
            @focus="inputFocus"
            @blur="inputBlur"
          />
        </div>
      </div>
      <!-- 收货地址 -->
      <div class="form-item">
        <img
          src="~@/assets/img/address/img_shdz.png"
          alt=""
          class="img-label"
        />
        <div class="textarea-wrapper">
          <textarea
            placeholder="请输入收货地址"
            rows="2"
            maxlength="50"
            class="input"
            v-model.trim="userInfo.address"
            @focus="inputFocus"
            @blur="inputBlur"
          ></textarea>
        </div>
      </div>
    </div>

    <img
      src="http://qiniu.whxgjt.com/dfh2/ip_04.png"
      alt=""
      class="ip-04"
      v-show="showIp"
    />
  </div>
</template>

<script>
import { WxShare } from "@/utils/wxConfig";
import { getUserAddress, saveAddress } from "@/api/common";

export default {
  name: "takeAddress",
  data() {
    return {
      showIp: true,
      userInfo: {
        id: "",
        userName: "",
        phoneNum: "",
        address: "",
      },
    };
  },
  methods: {
    async getUserAddress() {
      const openid = localStorage.getItem("openid");
      if (!openid) return;
      this.$showLoading();
      try {
        const res = await getUserAddress(openid);
        const data = res.data;
        if (data.errorCode === 0 && data.data) {
          this.userInfo = data.data;
        } else {
          console.log(data);
        }
      } catch (e) {
        console.log(e);
      }
      this.$closeLoading();
    },
    async saveAddress() {
      const openid = localStorage.getItem("openid");
      if (!openid) return;
      if (!this.userInfo.userName) {
        alert("用户名不能为空！");
        return;
      }
      if (!this.userInfo.phoneNum) {
        alert("联系方式不能为空！");
        return;
      }
      if(this.userInfo.phoneNum.length < 11) {
        alert("请输入正确的手机号！");
        return;
      }
      if (!this.userInfo.address) {
        alert("收货地址不能为空！");
        return;
      }
      this.$showLoading();
      try {
        const res = await saveAddress({ ...this.userInfo, userId: openid });
        const data = res.data;
        if (data.errorCode === 0) {
          alert("保存成功！");
          this.$router.push("/");
        } else {
          alert("保存失败！");
        }
      } catch (e) {
        console.log(e);
      }
      this.$closeLoading();
    },
    inputFocus() {
      // this.showIp = false;
    },
    inputBlur() {
      // this.showIp = true;
    },
  },
  mounted() {
    this.getUserAddress();
    WxShare();
  },
};
</script>

<style lang="scss" scoped>
.take-address {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("http://qiniu.whxgjt.com/dfh2/bg_dt.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  position: relative;

  .address-wrapper-bg {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 53px;
    z-index: 9;
    .address-bg {
      height: 396px;
    }
    .save-info {
      height: 88px;
      margin-top: -20px;
    }
  }

  .form {
    position: absolute;
    top: 115px;
    left: 53px;
    z-index: 10;
    .form-item {
      margin-top: 18px;
    }
    .img-label {
      height: 16px;
    }
    .input-wrapper {
      width: 255px;
      height: 45px;
      background: #ffe4d0;
      border-radius: 8px;
      input {
        width: 100%;
        height: 45px;
        padding: 0px 10px;
        outline-style: none;
        border: 0px;
        background-color: transparent;
        box-sizing: border-box;
      }
    }
    .textarea-wrapper {
      width: 255px;
      height: 70px;
      background: #ffe4d0;
      border-radius: 8px;
      textarea {
        width: 100%;
        height: 70px;
        padding: 10px;
        outline-style: none;
        border: 0px;
        background-color: transparent;
        box-sizing: border-box;
      }
    }
  }

  .ip-04 {
    width: 100%;
    height: 112px;
    position: fixed;
    bottom: 0;
  }
}
</style>